import React from 'react'
import { Link,withRouter } from 'react-router-dom'
import {
  CourseWrapper,
  CourseItem,
  CourseInfo,
  PriceLine
} from './style'


import { Button } from 'antd';

class CourseList extends React.Component {
  renderList() {
    let arr = []
    if(this.props.type && this.props.type === 'course_list') {
      if(this.props.list) {
        this.props.list.map(item => {
          arr.push(
              <CourseItem key={item.get('lessonId')}>
                <div className="wrapper">
                  {/* <a href={'/courseitem?id='+ item.get('lessonId')} >
                    <img style={{width: '100%', height: '163px'}}  src={item.get('coverUrl')} ></img>
                  </a> */}
                  <Link to={'/courseitem/'+ item.get('lessonId')} >
                    <img style={{width: '100%', height: '163px'}}  src={item.get('coverUrl')} ></img>
                  </Link>
                  <div className="clearfix content">
                    <CourseInfo>
                      课程时间：{item.get('lessonDate')}
                      {/* <span>暑期直播</span> */}
                      <p style={{lineHeight: 1, marginBottom: '10px', color: '#666'}}>上课时间：{item.get('lessonTime')}</p>  
                    </CourseInfo>
                    <PriceLine>
                      <Button type="primary" onClick={this.props.addCart(item)}> {item.get('shoppingStatus') === '已经购买' || item.get('shoppingStatus') === '免费' ?  '去观看': (item.get('shoppingStatus') === '已加入购物车' ? '移除购物车': '加入购物车')}</Button>
                    </PriceLine>
                  </div>
                </div>
              </CourseItem>
          )
        })
      }
    }else if(this.props.type && this.props.type === 'live') {
      if(this.props.list) {
        this.props.list.map(item=> {
          arr.push(
            <div key={item.get('actId')} style={{width: '33.33%', float: 'left', paddingLeft: '38px', boxSizing: 'border-box'}}>
              <div href="#" style={{background: '#fff', borderRadius: '4px', padding: '15px',height: '150px', marginBottom: '30px'}} className="wrapper" onClick={this.toLive.bind(this, item)}>
                <img src={item.get('teacherPhoto')} style={{width: '120px', height: '120px', borderRadius: '50%', float: 'left', cursor: 'pointer'}}/>
                <div style={{marginLeft: '140px', textAlign: 'left', cursor: 'pointer'}}>
                  <p style={{color: '#ccc', marginBottom: '15px', marginTop: '10px'}}>{this.renderTime(item.get('activityStartTimeMilli'))}</p>
                  <p style={{color: '#ccc'}}>{item.get('lessonDescription')}</p>
                  <p style={{color: '#ccc', marginTop: '15px'}}>{item.get('teacherName')}老师 <span>{item.get('teacherPosition')}</span></p>
                 <p style={{marginTop: '6px', color: '#ccc'}}>{item.get('teacherSchool')}</p>
                </div>
              </div>
            </div>
          )
        })
      }
    }else {
      if(this.props.list) {
        this.props.list.map(item => {
          arr.push(
            <CourseItem key={item.getIn(['lesson' ,'id'])}>
              <div className="wrapper">
                <Link to={'/courseitem/'+ item.getIn(['lesson' ,'id'])} >
                  <img style={{width: '100%', height: '163px'}}  src={item.get('coverUrl')} ></img>
                </Link>
                <div className="clearfix content">
                  <CourseInfo>
                    课程时间：{item.get('lessonDate')}
                   <p style={{lineHeight: 1, marginBottom: '10px', color: '#666'}}>上课时间：{item.get('lessonTime')}</p>
                  </CourseInfo>
                  <PriceLine>
                    {
                      item.get('lessonPrice') === '免费' ? "": <span className="price">￥{item.get('lessonPrice')}</span>
                    }
                    <Button type="primary" onClick={this.props.addCart(item)}> {item.get('shoppingStatus') === '已经购买' || item.get('shoppingStatus') === '免费'?  '去观看': (item.get('shoppingStatus') === '已加入购物车' ? '移除购物车': '加入购物车')}</Button>
                  </PriceLine>
                </div>
              </div>
            </CourseItem>
          )
        })
      }
    }
    return arr
  }

  toLive(item) {
    debugger
    if(item.get('shoppingStatus') === '已经购买') {
      window.location.href="/live?roomId=" + item.get('roomId')
    }else {
      this.props.history.push({
        pathname: '/courseitem/' + item.get('lessonId')
      })
    }
  }

  renderTime(str) {
    let t = new Date(parseInt(str))
    let m = (t.getMonth()+1) < 10 ? '0' + (t.getMonth()+1) : (t.getMonth()+1)
    let d= t.getDate() < 10 ? '0' + t.getDate() : t.getDate()
    let h = t.getHours() < 10 ? '0' + t.getHours() : t.getHours()
    let s = t.getMinutes() < 10 ? '0' + t.getMinutes() : t.getMinutes()
    return m + '月' + d + '日' + ' ' + h + ':' + s
  }
  render() {
    return (
      <CourseWrapper>
        <div style={{marginLeft: '-38px'}} >
        {
          this.renderList()
        }
        </div> 
      </CourseWrapper>
    )
  }
}

export default withRouter(CourseList)

